<template>
    <a-drawer
    v-model:visible="visible"
    title="添加"
    placement="right"
    width="463px"
  >
  <role-form ref="formRef" :formData="formData"></role-form>
   <template #extra>
      <close-outlined  @click="close"/>
    </template>
       
      <template #footer>
      <a-button style="margin-right: 8px;" @click="close">取消</a-button>
      <a-button type="primary" @click="handleOk">确定</a-button>
    </template>
  </a-drawer>
</template>

<script lang="ts" setup>
import { Ref, ref } from 'vue'
import { FormInstance, message } from 'ant-design-vue'
import { useModalForm } from '@/modules/use-modules'
import RoleForm from './RoleForm.vue'
import {add} from '@/modules/list'
const formRef = ref<InstanceType<typeof RoleForm>>()
const {
  formData,
  loading,
  visible,
  title,
  open,
  close
} = useModalForm({
  id: '',
  roleCode: '',
  roleName: '',
}, async (data: any) => {return{...data}})

const emits = defineEmits(['ok','getformData'])

const handleOk = async () => {
//   await formRef.value.validate()
//   await saveRole(formData.value)
   try {
        // const values = await formRef.value?.validate();
        const res= formRef.value?.getformData()
        await add(res)
        message.success('操作成功')
        emits('ok')
        close()
        //formRef.value?.resetFields()
      } catch (errorInfo) {
        console.log('Failed:', errorInfo);
      }
}

defineExpose({ open })
</script>
